<template>
  <div class="exception-title">
    <el-button type="primary" @click="handleToApply">异常处理</el-button>
    <el-space>
      <el-button plain>{{ year }}年</el-button>
      <el-select v-model="month">
        <el-option v-for="item in 12" :key="item" :value="item" :label="item + '月'" />
      </el-select>
    </el-space>
  </div>
  <el-row :gutter="20">
    <el-col :span="12">
      <el-empty v-if="false" description="暂无异常考勤" />
      <el-timeline v-else>
        <el-timeline-item v-for="item in detailMonth" :key="item[0]" :timestamp="year + '/' + month + '/' + item[0]"
          placement="top">
          <el-card>
            <el-space>
              <h4>{{ item[1] }}</h4>
              <p>考勤详情：{{ renderTime(item[0]) }}</p>
            </el-space>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-col>
    <el-col :span="12">
      <el-empty v-if="applyListMonth.length === 0" description="暂无申请审批" />
      <el-timeline v-else>
        <el-timeline-item v-for="item in applyListMonth" :key="(item._id as string)" :timestamp="(item.reason as string)"
          placement="top">
          <el-card>
            <h4>{{ item.state }}</h4>
            <p class="apply-info">申请日期 {{ (item.time as string[])[0] }} - {{ (item.time as string[])[1] }}</p>
            <p class="apply-info">申请详情 {{ item.note }}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from '@/store'
import { toZero } from '@/utils/common'

const route = useRoute();
const router = useRouter();
const store = useStore();

// 打卡信息
const signsInfos = computed(() => store.state.signs.infos)

const date = new Date();
// 年份
const year = date.getFullYear();
// 选择考勤月份 有参数的情况下，显示参数，没有参数的情况下，默认获取当前日期月份
const month = ref(Number(route.query.month) || date.getMonth() + 1)
const ret = ((signsInfos.value.detail as { [index: string]: unknown })[toZero(month.value)] as { [index: string]: unknown });

// 把对象数据转为数组 并且 筛选出考勤异常的数据 进行排序
const detailMonth = computed(() => Object.entries(ret).filter((v) => v[1] !== '正常出勤').sort());

const applyListMonth = computed(() => store.state.checks.applyList.filter((v) => {
  const startTime = (v.time as string[])[0].split(' ')[0].split('-');
  const endTime = (v.time as string[])[1].split(' ')[0].split('-');
  return startTime[1] <= toZero(month.value) && endTime[1] >= toZero(month.value)
}));

/**
 * 监听月份参数变化，改变查询页面参数
 */
watch(month, () => {
  router.push({
    query: { month: month.value }
  });
})

/**
 * 跳转到异常处理
 */
const handleToApply = () => {
  router.push('/apply');
};

/**
 * 考勤详情
 * @param date 月-多少号
 */
const renderTime = (date: string) => {
  // 获取到当月-多少号 打卡信息 数组类型
  const ret = ((signsInfos.value.time as { [index: string]: unknown })[toZero(month.value)] as { [index: string]: unknown })[date];
  // 判断是否为数组类型
  if (Array.isArray(ret)) {
    return ret.join('-');
  }
  else {
    return '暂无打卡记录';
  }
}

</script>

<style scoped lang="scss">
.exception-title {
  margin: 20px;
  display: flex;
  justify-content: space-between;
}

.el-select {
  width: 80px;
}

.el-timeline {
  margin: 10px;
}

.apply-info {
  margin: 10px;
}
</style>